<template>
  <div class="mainCon">
    <div class="mainCon">
      <div class="containercontent">
        <div class="treeDivStyle inlineblock">
          <div class="oprate">
            <!--物资类型-->
            <el-button type="primary" size="mini" style="float:right;margin-right:5px;" @click="deleteMaterType('materType')" v-if="userOpernation.delete.display"
              :disabled="materialTypeInfo.id== undefined || materialTypeInfo.id== '' || (materialTypeInfo.source !='' && materialTypeInfo.source != undefined )">删除</el-button>
            <el-button type="primary" size="mini" style="float:right;margin-right:5px;margin-left:0;" @click="editMaterType('edit')"
              v-if="userOpernation.update.display" :disabled="materialTypeInfo.id== undefined || materialTypeInfo.id== '' || (materialTypeInfo.source !='' && materialTypeInfo.source != undefined )">修改</el-button>
            <el-button type="primary" size="mini" style="float:right;margin-right:5px;" @click="materialTypeAdd" v-if="userOpernation.add.display"
              :disabled="materialTypeInfo.id== undefined || materialTypeInfo.id== '' ">新增</el-button>
          </div>
          <!--:node-key="id"-->
          <el-tree :data="MaterTypeList" :props="defaultProps" @node-click="handleNodeClick" ref="treeBox" node-key="id" :default-checked-keys="arrHight"
            :expand-on-click-node="false" default-expand-all :highlight-current="true"></el-tree>
        </div>
        <div class="inlineblock treeRightCon">
          <div class="seachTip selectw100">
            <div class="inlineblock verticalmiddle infoitem">
              <div class="inlineblock verticalmiddle">
                物资名称
              </div>
              <div class="inlineblock verticalmiddle informationItem">
                <el-input v-model="searchName" size="mini" placeholder="物资名称" @keyup.enter.native="readMaterialList(materQuery,'search')"></el-input>
              </div>
            </div>
            <div class="inlineblock basicRightDistanceA searchIcon">
              <el-button size="mini" @click="readMaterialList(materQuery,'search')">搜索</el-button>
              <el-button size="mini" @click="emptySearch">清空</el-button>
            </div>
          </div>

          <div class="separaterowTable">
            <div class="tableTittle">
              <div><span class="fontImpact">1</span><span>物资列表</span></div>
              <el-checkbox v-model="isDangerous" style="margin-left:20px;" disabled>是否危险物资</el-checkbox>
              <el-checkbox v-model="isStandard" disabled>是否标准样品</el-checkbox>
             <el-button type="primary" icon="el-icon-plus" size="mini" style="float:right" @click="addMaterList" v-if="userOpernation.add.display">添加物资</el-button>

              <el-button type="primary" icon="el-icon-plus" size="mini" style="float:right;margin-right:5px;" @click="choseMaterial" v-if="userOpernation.init.display">选择物资</el-button>
            </div>
            <el-table :data="MaterList" size='mini' class="tableCon">
              <el-table-column label="序号" fixed min-width="50px">
                <template slot-scope="scope">
                  {{scope.$index+(materQuery.page - 1) * materQuery.pageCount + 1}}
                </template>
              </el-table-column>
              <el-table-column prop="name" label="名称" show-overflow-tooltip>
              </el-table-column>
              <!--<el-table-column prop="number" label="编号">
              </el-table-column>-->

              <el-table-column prop="materialTypeName" label="类型" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="status" label="状态" :formatter="formatter">
              </el-table-column>

              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button v-if="scope.row.status=='1' && userOpernation.disable.display" type="text" size="mini" @click="isStart(scope.row)">停用</el-button>
                  <el-button v-if="scope.row.status=='0' && userOpernation.enable.display" type="text" size="mini" @click="isStart(scope.row)">启用</el-button>
                  <el-button size="mini" type="text" v-if="userOpernation.update.display" @click="editMaterial(scope.row)" :disabled="scope.row.source !='' && scope.row.source != undefined ">编辑</el-button>
                  <el-button size="mini" type="text" @click="deleteMaterType('materList',scope.row)" v-if="userOpernation.delete.display" :disabled="scope.row.source !='' && scope.row.source != undefined ">删除</el-button>

                </template>
              </el-table-column>
            </el-table>
            <div class="block changepages">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="materQuery.page" :page-sizes="[20,30,40]"
                :page-size="materQuery.pageCount" layout="total, sizes, prev, pager, next, jumper" :total="rowNumber">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <add-mater-type :addVisible.sync='addMaterialType' :newOrEdit="newOrEdit" :materialTypeInfo="materialTypeInfo"></add-mater-type>
    <add-material :addVisible.sync="addMaterialShow" :newOrEdit="newOrEditMaterial" :marterialInfo="marterialInfo" :materialTypeInfo="materialTypeInfo"></add-material>
    <chose-material :addVisible.sync="choseMaterialShow"></chose-material>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  const addMaterType = () => import('./children/addMaterType.vue');
  const addMaterial = () => import('./children/editMaterial.vue');
  const choseMaterial = () => import('./children/choseMaterial.vue');



  export default {
    data() {
      return {
        MaterTypeList: [], //物资类型
        addMaterialType: false, //添加物资类型
        defaultProps: {  //物资列表树继承的值
          children: 'materialTypeBeanList',
          label: 'name',
          value: 'id'
        },
        newOrEdit: 'new',//是新增还是编辑
        materialTypeInfo: {}, //点击的物资类型的信息
        arrHight: [], //树高亮显示的数组
        searchName: '',
        MaterList: [], //物资列表
        materQuery: {
          page: 1, //第几页
          pageCount: 20, //页面得记录条数，
        },
        rowNumber: 0,
        newOrEditMaterial: 'new', //是新增还是编辑物资列表
        addMaterialShow: false, //添加物资列表弹出
        marterialInfo: {}, //物资列表
        choseMaterialShow: false, //弹出选择框
        isDangerous: false,
        isStandard: false,


      }
    },
    computed: {
      ...mapState(['enableStatus', 'tableHeightB', 'typeofAbilityTableDate', 'materialType', 'manujson']),
    },
    components: {
      addMaterial, addMaterType, choseMaterial
    },
    props: ["userOpernation"],
    mounted() {
      this.readMaterTypeList();
      this.readMaterialList(this.materQuery);

    },
    watch: {
      materQuery: {
        handler(val, oldVal) {
          this.readMaterialList(this.materQuery)
        },
        deep: true
      },
    },
    methods: {
      emptySearch(){
        this.searchName = "";
        this.readMaterialList(this.materQuery,'search')

      },
      formatter(row, column, cellValue, index) {
        return this.util.changeStatus({ cellValue: cellValue, list: this.enableStatus })
      },
      choseMaterial() {
        this.choseMaterialShow = true;
      },
      //读取物资类型列表
      readMaterTypeList(nid) {
        this.$http({
          method: 'post',
          apiUrl: '/technology/readEnableMaterTypeList.htm',
        }).then(res => {
          if (res.code === 0) {
            this.MaterTypeList = res.data;
            // var id = res.data[0].id
            // this.$nextTick(() => {
            //     this.$refs.treeBox.setCurrentKey(id);// treeBox 元素的ref   value 绑定的node-key

            //   });
            if (nid) {
              this.arrHight.push(nid);
              this.$nextTick(() => {
                this.$refs.treeBox.setCurrentKey(nid);// treeBox 元素的ref   value 绑定的node-key

              });
            }

          }
        })
      },

      // 添加物资类型
      materialTypeAdd() {
        this.addMaterialType = true;
        this.newOrEdit = 'new'
      },
      //  点击物资类型树
      handleNodeClick(val) {
        this.isDangerous = val.dangerous;
        this.isStandard = val.standardSample;
        this.materialTypeInfo = val;
        this.materQuery.page = 1;
        this.readMaterialList(this.materQuery)
      },
      // 编辑物资类型
      editMaterType(newOrEdit) {
        this.addMaterialType = true;
        this.newOrEdit = newOrEdit;
      },
      // 删除物资类型
      deleteMaterType(val, row) {
        // console.log(val,row)
        this.$confirm('是否删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var that = this;
          if (val == 'materType') {
            var url = "/technology/deleteMaterialType.htm"
            var data = {
              id: this.materialTypeInfo.id,
            }
          } else {
            var url = '/technology/deleteMaterial.htm'
            var data = {
              id: row.id
            }
          }
          this.$http({
            apiUrl: url,
            type: 'post',
            params: data,
          }).then(res => {
            if (res.code === 0) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              if (val == 'materType') {
                this.materialTypeInfo = {};  //删除之后选中节点置为空
                this.readMaterTypeList()  //删除之后刷新树
                this.handleNodeClick(this.materialTypeInfo)
              } else {
                this.readMaterialList(this.materQuery)
              }

            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      // 读取物资列表
      readMaterialList(parp, search) {
        var data = {
          materialType: this.materialTypeInfo.code,
          name: this.searchName,
        }
        if (search != undefined) {
          this.materQuery.page = 1;
          data.page = 1;
          data.pageCount = parp.pageCount;
        } else {
          data.page = parp.page;
          data.pageCount = parp.pageCount;
        }
        this.$http({
          method: 'post',
          apiUrl: '/technology/readMaterialList.htm',
          params: data,
          isJson: false,
        }).then(res => {
          if (res.code === 0) {
            this.MaterList = res.data;
          }
          if (!res.pageinfo) {
            this.rowNumber = 0;
          } else if (res.pageinfo && !res.pageinfo.rowNumber) {
            this.rowNumber = 0;
          } else {
            this.rowNumber = res.pageinfo.rowNumber;
          }
        })
      },
      // 添加物资列表
      addMaterList() {
        if (JSON.stringify(this.materialTypeInfo) == "{}") {
          this.$message({
            type: 'info',
            message: '请先选中物资类型!'
          });
        } else {
          this.newOrEditMaterial = "new";
          this.addMaterialShow = true
        }

      },
      editMaterial(row) {

        this.newOrEditMaterial = "edit";
        this.addMaterialShow = true
        for (var i in row) {
          this.marterialInfo[i] = row[i]
        }
      },
      isStart(row) {
        var msg = row.status == 0 ? "启用" : "停用";
        this.$confirm("是否" + msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            method: 'post',
            apiUrl: '/technology/updateMaterialStatus.htm',
            params: {
              id: row.id,
              status: row.status == 0 ? 1 : 0,
            },
            isJson: false,
          }).then(res => {
            if (res.code === 0) {
              this.readMaterialList(this.materQuery)
            }

          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消' + msg
          });
        });
      },
      handleCurrentChange(val) {
        this.materQuery.page = val;
      },
      handleSizeChange(val) {
        this.materQuery.pageCount = val;
      },



    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .treeDivStyle {
    width: 25%;
    height: 100%;
    background: #fff;
  }
  .treeDivStyle .el-tree{
      height: calc(100% - 40px);
      overflow-y: scroll;
      overflow-x: auto;
  }

  .treeRightCon {
    width: 73%;
    height: 100%;
    vertical-align: top;
  }

  .treeDivStyle .oprate {
    height: 40px;
    padding-top: 5px;
    border-bottom: 1px solid #dadada;
  }
</style>
